
"use client"

import { useBillboard } from "@/app/utils/hooks/useMovies"
import { AiOutlineInfoCircle } from "react-icons/ai"
import { PlayButton } from "./PlayButton"
import { useInfoModal } from "@/app/utils/hooks/useInfoModal"

export const BillBoard = () => {
    const { data } = useBillboard()
    const { openModal } = useInfoModal()
    if (!data) return null
    return (<>
        <div className="f-[56.vw] relative z-0">
            <video className="w-full object-cover brightness-[60%]" src={data?.videoUrl} autoPlay muted loop poster={data?.thumbnailUrl} />
            <div className="absolute top-[30%] md:top-[40%] ml-4 md:ml-16 ">
                <p className="text-white text-1xl md:text-5xl h-full w-[50%] lg:text-6xl font-bold drop-shadow-xl">
                    {data?.title}
                </p>
                <p className="text-white text-[8px] md:text-lg mt-3 text-ellipsis line-clamp-3 md:mt-8 w-[90%] md:w-[80%] drop-shadow-xl">
                    {data?.desciption}
                </p>
                <div className="flex flex-row items-center mt-3 md:mt-4 gap-3">
                    <PlayButton movieId={data.id} />
                    <button onClick={() => openModal(data.id)} className="bg-white text-white flex flex-row items-center bg-opacity-50 rounded-md py-1 md:py-2 px-2 md:px-4 w-auto text-xs lg:text-lg hover:bg-opacity-20">
                        <AiOutlineInfoCircle className="mr-1" /> More info
                    </button>
                </div>
            </div>
        </div>
    </>)
}